import React from "react";
import TheImage from "@/components/TheImage";
import "../style/style.less";
import { apiServiceDetail } from '@/request/services'

class Detail extends React.Component {
  state = {
    data: [],
    serviceTxt: ''
  };
  async componentDidMount() {
    await this.getData()
  }
  getData = async () => {
    const { serviceId } = this.props
    let res = await apiServiceDetail({ serviceId })
    if (res.data && res.code === 0) {
      let detailData = res.data
      let labelList = res.data.labelList.map(v => v.serviceShowLabelName)
      let label = labelList.join(',')
      let petType = detailData.petType
      if (petType !== null){
        switch (petType){
          case 0:
            petType = "狗"
            break;
          case 1:
            petType = "猫"
            break;
          case 2:
            petType = "不限制"
            break;
          case 3:
            petType = "异宠"
            break;
          default:
            break
        }
      }
      else {
        petType = "/"
      }
      let data = [
        {
          title: "服务类型",
          value: detailData.serviceClassifyName,
        },
        {
          title: "服务名称",
          value: detailData.serviceName,
        },
        {
          title: "服务logo",
          value: (
            <TheImage
              width={80}
              height={80}
              src={detailData.serviceShowFile}
            />
          ),
        },
        {
          title: "宠物种类",
          value: petType
        },
        {
          title: "宠物重量(kg)",
          value: (detailData.petWeightStart !== null ? detailData.petWeightStart : '/')+'~'+(detailData.petWeightEnd !== null ? detailData.petWeightEnd :'/')
        },
        {
          title: "服务价格",
          value: <React.$Price price={detailData.serviceRealPrice} />,
        },
        {
          title: "预约时间",
          value: `${detailData.serviceStartTime} 至 ${detailData.serviceEndTime}`,
        },
        {
          title: "服务标签",
          value: label,
        },
      ]
      this.setState({ data, serviceTxt: res.data.serviceTxt })
    }
  }
  render() {
    return (
      <div className="service-detail-box">
        {this.state.data.map((v, i) => {
          return (
            <div className="service-detail-item" key={i}>
              <p className="service-detail-title">{v.title}</p>
              <p className="service-detail-value">{v.value}</p>
            </div>
          );
        })}
        <div className="title">服务说明</div>
        <div dangerouslySetInnerHTML={{ __html: this.state.serviceTxt }} />
      </div>
    );
  }
}

export default Detail;
